<template>
  <div style="display:inline-block;margin-left:10px" v-if="showButtin">
    <el-button type="primary" size="mini" @click="payOrder">
      支付
    </el-button>
    <el-dialog v-loading="loading" title="支付" :visible.sync="dialogFormVisible" width="480px" style="text-align:left">
      <el-form :model="payForm" ref="payForm" :rules="payFormRules" label-position="right" label-width="120px">
        <el-form-item label="订单编号：">
          <el-input :value="row.identifier" disabled />
        </el-form-item>
        <el-form-item label="支付金额：">
          <el-input :value="row.totalAmount" disabled />
        </el-form-item>
        <el-form-item label="供应商：">
          <el-input :value="row.gongyingName" disabled />
        </el-form-item>
        <el-form-item label="支付方式：" prop="payType">
          <el-radio-group v-model="payForm.payType">
						<!-- 去掉下线支付了-->
            <el-radio v-for="item in payTypeJson" :key="item.value" :label="item.value">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="payForm.payType === 2">
          <el-form-item label="支付流水号：" prop="liushuihao">
            <el-input v-model.trim="payForm.liushuihao" />
          </el-form-item>
          <el-form-item label="支付备注：">
            <el-input v-model="payForm.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" />
          </el-form-item>
          <el-form-item label="支付附件">
            <Upload :defaultFileName.sync="payForm.file" :mode="2" />
          </el-form-item>
        </template>
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>发票信息</span>
          </div>
          <el-form-item label="名称">
            <el-input :value="memberInfo.taxName" disabled />
          </el-form-item>
          <el-form-item label="纳税人识别号">
            <el-input :value="memberInfo.taxNo" disabled />
          </el-form-item>
          <el-form-item label="开户行">
            <el-input :value="memberInfo.taxBank" disabled />
          </el-form-item>
          <el-form-item label="账号">
            <el-input :value="memberInfo.taxBankNo" disabled />
          </el-form-item>
          <el-form-item label="地址">
            <el-input :value="memberInfo.taxAddress" disabled />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input :value="memberInfo.taxMobile" disabled />
          </el-form-item>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handlePay()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { orderOfflinePay,ICBCb2bpay } from '@/api/mall'
import { getMemberInfo } from '@/api/user'
import { payTypeJson } from '../constant'
import Upload from '@/components/Upload'
export default {
  name: 'ConfirmButton',
  components: { Upload },
  props: {
    row: {
      type: Object,
      default: () => ({})
    },
    userInfo: {
      type: Object,
      default: () => ({})
    },
    orderStatusJson: {
      type: Array,
      default: () => []
    },
    orderTypeJson: {
      type: Array,
      default: () => []
    },
    driverList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showButtin: false,
      dialogFormVisible: false,
			loading: false,
      payForm: {
        id: '',
        payType: 1,
        liushuihao: '',
        remark: '',
        file: ''
      },
      payFormRules: {
        payType: [{ required: true, message: '请选择', trigger: 'blur' }],
        liushuihao: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      payTypeJson,
      memberInfo: {}
    }
  },
  watch: {
    row(val) {
      this.$nextTick(() => {
        this.isShow()
      })
    },
    userInfo(val) {
      this.$nextTick(() => {
        this.isShow()
      })
    },
  },
  created() {
    this.$nextTick(() => {
      this.isShow()
    })
		console.log(this.row);
  },
  methods: {
    isShow() {
      //类型
      if (this.row.type !== 6 || !this.checkButtonPermission('pay')) {
        this.showButtin = false
        return false
      }
      //状态&用户类型
      // if (!(this.userInfo.type === 2 && this.row.status === 2) && !(this.userInfo.type === 1 && this.row.status === 3)) {
      //   this.showButtin = false
      //   return false
      // }
      //去除用户类型判断
      if (this.row.status !== 2) {
        this.showButtin = false
        return false
      }
      this.showButtin = true
    },
    handlePay() {
			this.loading = true;
      this.$refs["payForm"].validate((valid) => {
        if (valid) {
          if (this.payForm.payType === 1) {
            const params = {
              payNo: this.payForm.liushuihao,
              payRemark: this.payForm.remark,
              id: this.row.id,
              payFile: this.payForm.file,
            }
            orderOfflinePay(params).then((res) => {
							this.$emit('getList')
              this.dialogFormVisible = false;
							this.loading = false;
							window.open(res, '_blank');
            }).catch(err=>{
							this.loading = false;
						})
          } else {
            // const params = {
            //   payType: this.payForm.payType,
            //   logicRemark: this.payForm.logicRemark,
            //   originalId: this.row.id
            // }
            this.$message.error('此功能暂未开通')
          }
        }
      });
    },
    payOrder() {
      this.getMemberInfo(this.row.gongyingId)
      this.dialogFormVisible = true;
      this.payForm.payType = 1
      this.payForm.logicRemark = ''
      this.$nextTick(() => {
        this.$refs['payForm'].clearValidate()
      })
    },
    getMemberInfo(id) {
      if (!id) {
        return
      }
      return new Promise((resolve, reject) => {
        getMemberInfo(id)
          .then(res => {
            this.memberInfo = res
            resolve(res);
          })
          .catch(err => {
            reject(err);
          });
      });
    },
  }
}
</script>
